<template>
  <div style="padding: 20px; height: 75vh">
    <el-tabs style="height: 100%" v-model="activeTab" v-if="business">
      <el-tab-pane label="基础信息" style="height: 100%" name="first">
        <div
          style="
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            background-color: #f0f2f5;
            padding: 20px;
            box-sizing: border-box;
          "
        >
          <el-row :gutter="60" style="width: 100%; height: 100%">
            <el-col :span="24" style="height: 100%">
              <div class="section" style="margin-right: 20px">
                <el-form label-width="140px" v-if="business">
                  <el-form-item label="名称">
                    <el-input
                      style="width: 400px"
                      v-model="business.BF_Name"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="图标">
                    <el-input
                      style="width: 400px"
                      v-model="business.BF_Icon"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="背景色">
                    <el-input
                      style="width: 400px"
                      v-model="business.BF_Color"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="图标颜色">
                    <el-input
                      style="width: 400px"
                      v-model="business.BF_IconColor"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="描述">
                    <el-input
                      style="width: 600px"
                      type="textarea"
                      :rows="3"
                      v-model="business.BF_Info"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="可选择审批人类型">
                    <div>
                      <el-checkbox
                        v-for="item in opChoices"
                        :key="item.FOC_ID"
                        :value="
                          business.choices.findIndex(
                            (x) => x.BOC_OperatorChoiceID == item.FOC_ID
                          ) != -1
                        "
                        @change="
                          (ischecked) => {
                            opChoiceChange(business, item, ischecked)
                          }
                        "
                      >
                        {{ item.FOC_Name }}
                      </el-checkbox>
                    </div>
                  </el-form-item>
                  <el-form-item label="可执行方法">
                    <el-table :data="business.actions">
                      <el-table-column
                        type="index"
                        width="50"
                      ></el-table-column>
                      <el-table-column label="方法名称">
                        <template slot-scope="scope">
                          <span>{{ scope.row.BFA_Name }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="方法映射码">
                        <template slot-scope="scope">
                          <span>{{ scope.row.BFA_Code }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="是否必需执行">
                        <template slot-scope="scope">
                          <span>{{ scope.row.BFA_Necessary }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="依赖方法">
                        <template slot-scope="scope">
                          <span>{{ scope.row.BFA_NeedActionNames }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="方法执行类型">
                        <template slot-scope="scope">
                          <span>{{ scope.row.BFA_TypeDesc }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="备注">
                        <template slot-scope="scope">
                          <span>{{ scope.row.BFA_Remark }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column>
                        <template slot="header">
                          <el-button
                            type="text"
                            size="medium"
                            slot="reference"
                            icon="el-icon-plus"
                            @click="addActionVis = true"
                          >
                            添加方法
                          </el-button>
                        </template>
                        <template slot-scope="scope">
                          <el-button
                            icon="el-icon-delete"
                            @click="removeAction(scope.$index)"
                          ></el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="表单设计" style="height: 100%" name="second">
        <div
          style="
            height: 100%;
            width: 100%;
            display: flex;
            background-color: #f3f3f3;
            justify-content: space-between;
          "
        >
          <div
            style="
              height: 100%;
              width: 300px;
              padding: 18px 0;
              background-color: white;

              box-sizing: border-box;
              display: block;
            "
          >
            <form-divider title="组件" />
            <div style="overflow: auto; height: 90%; width: 300px">
              <div
                v-for="field in fields"
                :key="field.FFLD_ID"
                style="margin: 5px"
              >
                <div
                  style="
                    width: 236px;
                    height: 45px;
                    box-sizing: border-box;
                    display: flex;
                    background: #f9f9f9;
                    border-radius: 4px;
                    border: 1px solid #eeeeee;
                    align-items: center;
                    padding: 0 19px;
                    justify-content: space-between;
                    user-select: none;
                  "
                >
                  <div
                    style="
                      width: 116px;
                      height: 22px;
                      font-size: 16px;
                      font-family: PingFangSC, PingFang SC;
                      font-weight: 600;
                      color: #333333;
                      line-height: 22px;
                    "
                  >
                    {{ field.FFLD_Label }}
                  </div>
                  <i
                    @click="doAddField(field)"
                    class="el-icon-circle-plus"
                    style="color: #c8c8c8; font-size: 16px; cursor: pointer"
                  ></i>
                  <!--el-button @click="doAddField(field)">
                  {{ field.FFLD_Label }}
                </el-button-->
                </div>
              </div>
            </div>
          </div>
          <div
            style="
              margin: 20px 99px;
              height: 90%;
              box-sizing: border-box;
              overflow: auto;
              width: 600px;
              display: block;
            "
          >
            <draggable
              v-if="business"
              v-model="business.fields"
              :animation="340"
              @start="startDrag"
            >
              <div
                v-for="(item, index) in business.fields"
                :key="index"
                @click="selectFormField = item"
                class="form-field-container"
              >
                <div style="display: flex; position: relative">
                  <div
                    style="
                      width: 506px;
                      padding: 0px 5px;
                      box-sizing: border-box;
                      background: white;
                      position: relative;
                      background-color: white;
                    "
                    :class="selectFormField == item ? 'form-field-actived' : ''"
                  >
                    <formField
                      style="width: 100%; background-color: white"
                      :formField="item"
                      :isBusiness="true"
                    />
                  </div>
                  <div
                    v-if="selectFormField == item"
                    style="
                      position: absolute;
                      top: 0;
                      right: -34px;
                      z-index: 1000;
                      padding: 5px;
                      display: flex;
                      flex-direction: row;
                      background-color: white;
                    "
                  >
                    <i
                      class="el-icon-delete"
                      @click.stop="removeField(index)"
                      style="font-size: 20px"
                    ></i>
                  </div>
                </div>
              </div>
            </draggable>
          </div>
          <div
            style="
              width: 500px;
              background-color: white;
              height: 100%;
              display: block;
              padding: 20px;
              box-sizing: border-box;
            "
          >
            <form-divider title="组件" />
            <fieldConfig
              v-model="selectFormField"
              :isBusiness="true"
              :actions="business.actions"
            />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-drawer
      :visible.sync="addActionVis"
      title="添加可执行方法"
      direction="rtl"
      @open="newAction = {}"
    >
      <el-form label-width="120px" label-position="left" style="margin: 20px">
        <el-form-item label="方法名称">
          <el-input v-model="newAction.BFA_Name"></el-input>
        </el-form-item>
        <el-form-item label="方法映射码">
          <el-input v-model="newAction.BFA_Code"></el-input>
        </el-form-item>
        <el-form-item label="方法执行类型">
          <el-select filterable value-key="EnumValue" v-model="newAction.type">
            <el-option
              v-for="item in actionTypes"
              :key="item.EnumValue"
              :label="item.Description"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否必需执行">
          <el-checkbox v-model="newAction.BFA_Necessary" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            :rows="3"
            v-model="newAction.BFA_Remark"
          ></el-input>
        </el-form-item>
        <el-form-item label-width="0">
          <el-divider>依赖方法</el-divider>
          <el-table :data="newAction.dependActions" v-if="business">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column label="方法名" prop="BFA_Name"></el-table-column>
            <el-table-column width="160">
              <template slot="header">
                <!-- <el-popover
                  placement="right"
                  width="200"
                  v-model="addDependActionVis"
                  trigger="click"
                >
                  <div
                    v-for="action in business.actions"
                    :key="action.BFA_Guid"
                    style="margin: 5px"
                  >
                    <el-button @click="addDependAction(action)">
                      {{ action.BFA_Name }}
                    </el-button>
                  </div>
                  <el-button
                    slot="reference"
                    type="text"
                    size="medium"
                    icon="el-icon-plus"
                  >
                    添加依赖
                  </el-button>
                </el-popover> -->
                <el-button
                  type="text"
                  size="medium"
                  icon="el-icon-plus"
                  @click="addDependActionVis = true"
                >
                  添加依赖
                </el-button>
              </template>
              <template slot-scope="scope">
                <el-button
                  icon="el-icon-delete"
                  @click="newAction.dependActions.splice(scope.$index, 1)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="addAction"
            type="primary"
            icon="el-icon-circle-check"
            title="确认"
          >
            确认
          </el-button>
          <el-button @click="addActionVis = false" title="取消">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-dialog
      title="添加依赖方法"
      :visible.sync="addDependActionVis"
      width="300px"
    >
      <el-form style="margin: 20px">
        <el-form-item>
          <el-select
            filterable
            value-key="BFA_Guid"
            v-model="newAction.dependAction"
            v-if="business"
          >
            <el-option
              v-for="item in business.actions"
              :key="item.BFA_Guid"
              :label="item.BFA_Name"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="addDependAction"
            type="primary"
            icon="el-icon-circle-check"
            title="确认"
          >
            确认
          </el-button>
          <el-button @click="addDependActionVis = false" title="取消">
            取消
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-button
      style="
        position: fixed;
        right: 100px;
        bottom: 40px;
        width: 100px;
        height: 60px;
      "
      type="primary"
      round
      @click="saveForm"
    >
      保存
    </el-button>
  </div>
</template>
<script>
import {
  getActionTypes,
  getBusiness,
  saveForm,
  getOperatorChoices,
} from '@/api/flowCenter/business/businessManage'
import { getFields } from '@/api/flowCenter/field/fieldManage'
import { generateGUID } from '@/utils/guid'
import formField from '@/views/web/flowManage/components/formField.vue'
import formDivider from '@/views/components/formDivider.vue'
import draggable from 'vuedraggable'
import fieldConfig from '@/views/web/flowManage/components/formField/config/fieldConfig.vue'
export default {
  components: { formField, formDivider, draggable, fieldConfig },
  data: function () {
    return {
      activeTab: 'first',

      business: null,
      selectFormField: null,
      fields: null,
      addActionVis: false,
      addDependActionVis: false,
      newAction: {},
      opChoices: [],
      actionTypes: [],
    }
  },
  methods: {
    opChoiceChange(business, choice, ischecked) {
      if (ischecked) {
        if (!business.choices) business.choices = []
        business.choices.push({
          BOC_BusinessID: business.BF_ID,
          BOC_OperatorChoiceID: choice.FOC_ID,
        })
      } else
        business.choices.splice(
          business.choices.findIndex(
            (x) => x.BOC_OperatorChoiceID == choice.FOC_ID
          ),
          1
        )
    },
    addAction() {
      if (!this.business.actions) {
        this.business.actions = []
      }
      this.newAction.BFA_TypeDesc = this.newAction.type.Description
      this.newAction.BFA_Type = this.newAction.type.EnumValue
      this.newAction.BFA_Guid = generateGUID()
      this.business.actions.push(this.newAction)
      this.addActionVis = false
      this.$forceUpdate()
    },
    removeAction(index) {
      if (!this.business.removedActions) {
        this.business.removedActions = []
      }
      let action = this.business.actions[index]
      this.business.removedActions.push(action)
      this.business.actions.splice(index, 1)
    },
    addDependAction() {
      if (!this.newAction.dependAction) {
        return
      }
      if (!this.newAction.dependActions) {
        this.newAction.dependActions = []
      }
      this.newAction.dependActions.push(this.newAction.dependAction)
      this.newAction.BFA_NeedActionGuids = JSON.stringify(
        this.newAction.dependActions.map((x) => x.BFA_Guid)
      )
      this.newAction.BFA_NeedActionNames = JSON.stringify(
        this.newAction.dependActions.map((x) => x.BFA_Name)
      )
      this.newAction.dependAction = null
      this.addDependActionVis = false
    },
    getActionTypes() {
      getActionTypes().then(({ data }) => {
        this.actionTypes = data
      })
    },
    getOpChoices() {
      getOperatorChoices().then(({ data }) => {
        this.opChoices = data
      })
    },
    getFields() {
      getFields().then(({ data }) => {
        this.fields = data
      })
    },
    getBusiness(id) {
      getBusiness(id).then(({ data }) => {
        this.business = data
      })
    },
    doAddField(f) {
      let formField = {
        ...f,
        BFF_Guid: generateGUID(),
        BFF_FieldID: f.FFLD_ID,
        BFF_Require: true,
        BFF_EditAble: true,
        BFF_FieldName: '',
        props: [],
      }
      formField.props = f.props.map((x) => {
        return {
          ...x,
          BFFP_FieldPropID: x.FLPR_ID,
          BFFP_Name: x.FLPR_Name,
          BFFP_Value: '',
        }
      })
      this.business.fields.push(formField)
      this.$forceUpdate()
    },
    removeField(index) {
      this.business.fields.splice(index, 1)
    },
    saveForm() {
      saveForm(this.business).then(() => {
        this.getBusiness(this.$route.query.id)
        this.$message('保存成功')
      })
    },
    startDrag(v) {
      this.formField = this.business.fields[v.oldIndex]
    },
  },
  mounted() {
    if (this.$route.query.id) {
      this.getBusiness(this.$route.query.id)
      this.getFields()
      this.getOpChoices()
      this.getActionTypes()
    }
  },
}
</script>
<style>
.el-tabs__content {
  height: 100%;
}
</style>
<style scoped>
.section {
  background-color: white;
  height: 100%;
  padding: 30px 20px;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: auto;
  width: 100%;
}
.list-element {
  padding: 10px;
  background: #eee;
}
.form-field-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  justify-content: space-between;
}
.form-field-actived {
  border: 1px solid #12a3ff;
}
.right-section {
  height: calc(100% - 60px);
  overflow-y: auto;
}
.right-section-bottom {
  height: 60px;
  display: flex;
  align-items: center;
}
</style>